<script setup lang="ts">
const { select = () => {} } = defineProps<{
  select?: (hostConnConf?: HostConnConfType) => void
}>()

const hostConnConfStore = useHostConnConfStore()

const hostConnConfOptions = computed(() => {
  return ArrUtil.copyDeep(hostConnConfStore.getTree(), {
    propsMap: {
      type: 'disabled'
    },
    targetPropValPreHandler: {
      disabled: (item) => item.type === HostConnConfTypeConst.DIR
    }
  })
})

const hostConnConfSelectedIdPath = ref([])
const selectHost = () =>
  select(
    hostConnConfStore.getMap()[
      ArrUtil.getLast(!hostConnConfSelectedIdPath.value ? [] : hostConnConfSelectedIdPath.value)
    ]
  )
</script>

<template>
  <el-cascader
    v-model="hostConnConfSelectedIdPath"
    :options="hostConnConfOptions"
    :props="{ checkStrictly: true }"
    :show-all-levels="false"
    placeholder="请选择服务器主机"
    clearable
    @change="selectHost"
  >
    <template #default="{ data }">
      <div class="flex items-center gap-2">
        <s-icon v-bind="data?.icon" />
        <span>{{ data?.label }}</span>
      </div>
    </template>
  </el-cascader>
</template>

<style scoped lang="scss"></style>
